<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>React</title>
    <style>

        img:hover {
            opacity: 0.2;
            transition: all 1.0s;
        }

        li {
            list-style: none;
        }

        pre,
        ul.sub {
            padding: 4px;
            border-radius: 4px;
            display: block;
            margin-right: 40px;
            background-color: #efefef;
        }

        .warn {
            color: #ff4400;
        }

    </style>
</head>
<body>
<div>
    <h2>认识React</h2>
    <div>
        在Web开发中，我们总需要将变化的数据实时反应到UI上，这时就需要对DOM进行操作。而复杂或频繁的DOM操作通常是性能瓶颈产生的原因（如何进行高性能的复杂DOM操作通常是衡量一个前端开发人员技能的重要指标）。React为此引入了虚拟DOM（Virtual
        DOM）的机制：在浏览器端用Javascript实现了一套 DOM
        API。基于React进行开发时所有的DOM构造都是通过虚拟DOM进行，每当数据变化时，React都会重新构建整个DOM树，然后React将当前整个DOM树和上一次的DOM树进行对比，得到DOM结构的区别，然后仅仅将需要变化的部分进行实际的浏览器DOM更新。
        而且React能够批处理虚拟DOM的刷新，在一个事件循环（Event
        Loop）内的两次数据变化会被合并，例如连续的先将节点内容从A变成B，然后又从B变成A，React会认为UI不发生任何变化，而如果通过手动控制，这种逻辑通常是极其复杂的。
        尽管每一次都需要构造完整的虚拟DOM树，但是因为虚拟DOM是内存数据，性能是极高的，而对实际DOM进行操作的仅仅是Diff部分，因而能达到提高性能的目的。
        这样，在保证性能的同时，开发者将不再需要关注某个数据的变化如何更新到一个或多个具体的DOM元素，而只需要关心在任意一个数据状态下，整个界面是如何Render的。
    </div>
    <h2>组件化的开发思路</h2>
    虚拟DOM不仅带来了简单的UI开发逻辑，同时也带来了组件化开发的思想，React推荐以组件的方式去重新思考UI构成，将UI上每一个功能相对独立的模块定义成组件，
    开发者从功能的角度出发，将UI分成不同的组件，每个组件都独立封装, 然后将小的组件通过组合或者嵌套的方式构成大的组件，最终完成整体UI的构建。
    Facebook的instagram.com整站都采用了React来开发，整个页面就是一个大的组件，其中包含了嵌套的大量其它组件。
    <br/>
    <a href="templete.html">example2</a>
    <h2>JSX语法</h2>
    <div>HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，它允许 HTML 与 JavaScript 的混写；</div>
    <div>JSX 的基本语法规则：
        <ul class="sub">
            <li>以 < 开头，就用 HTML 规则解析；</li>
            <li>以 { 开头，就用 JavaScript 规则解析。</li>
        </ul>
    </div>
    <h3>Example</h3>
<pre>
// app.js
const App = React.createClass({
    render() {
        return < div> HelloWorld < /div>;
    }
});

ReactDOM.render(< App />, document.body);
</pre>
    <div>使用Webpack打包之后,上面的jsx语法定义的代码被转换成如下内容</div>
<pre>
	var App = _react2.default.createClass({
	    displayName: 'App',
	    render: function render() {
	        return _react2.default.createElement(
	            'div',
	            null,
	            'HelloWorld'
	        );
	    }
	});
	_reactDom2.default.render(_react2.default.createElement(App, null), document.body);
</pre>
    <div>将上面的app.js组件更改成如下样式</div>
<pre>
// app.js
var App = React.createClass({
    render: function render() {
        return React.createElement(
            'div',
            null,
            'HelloWorld'
        );
    }
});

ReactDOM.render(React.createElement(App, null), document.body);
</pre>
    <div>再次使用webpack打包, 打包之后的代码和之前jsx语法打包出来的代码相同;</div>
    <div class="warn"><strong>JSX只是一个表象，没有JSX的React也能工作, 但是使用JSX语法进行开发大大的提升了工作效率.</strong></div>
</div>

<h2>组件定义</h2>
<ul>
    <li>
        <h4>React.createClass</h4>
<pre>
const HelloWorld = React.createClass({
    render: function(){
        return < div> HelloWorld < /div>
    }
});
</pre>
    </li>
    <li>
        <h4>继承React.Component</h4>
<pre>
class HelloWorld extends React.Component {
    render() {
        return (< div>Hello World< /div>);
    }
}
</pre>
    </li>
    <li>
        <h4>无状态组件</h4>
<pre>
var React = require("react");

var HelloWorldComponent = function() {
    return < div>
        < button>HelloWorld< /button>
    < /div>;
};

export default HelloWorldComponent
</pre>
    </li>
</ul>
<h2>组件的属性</h2>
<pre>
const App = React.createClass({
    render() {
        return < div>{this.props.location}< /div>
    }
});
ReactDOM.render(< App location="xian" />, document.body);
</pre>
<div>渲染结果</div>
<pre>< div data-reactroot="">xian< /div></pre>
<div>除了字符串之外,属性还可以是任意的js对象</div>
<ul>
    <li>
        <h4>function</h4>
<pre>
const App = React.createClass({
    render() {
        return < div onClick={this.onClick}>{this.props.location}< /div>
    }
});
function appClicked() {
    console.log('appClicked');
}
ReactDOM.render(< App location="xian" onClick={appClicked}/>, document.body);
</pre>
    </li>
    <li>
        <h4>object</h4>
<pre>
const App = React.createClass({
    render() {
        return < div>
            < div>工作单位:{this.props.work.cpy}< /div>
            < div>工作地点:{this.props.work.location}< /div>
        < /div>
    }
});
var work = {
    cpy: 'hoperun',
    location: 'xian',
}
ReactDOM.render(< App work={work}/>, document.body);
</pre>
    </li>
</ul>

<div></div>
</body>
</html>